{% extends './template/indexOption.html' %}

{% block indexOption %}

<link rel="stylesheet" href="/css/view/rain.css">
<link rel="icon" href="/images/上方小图标/位图/上方小图标.png">
<title>暴风雨来啦</title>

<body>
  <!-- 上方的导航栏云背景 -->
  <div class="navigationBar"></div>

  <!-- 所有的雨滴效果的盒子 -->
  <div class="rain-boxa">
    <div class="rain-boxb">
      <hr style="left: 3%; animation-duration: 0.347563s; animation-delay: 2.68986s;">
      <hr style="left: 57%; animation-duration: 0.232745s; animation-delay: 3.65989s;">
      <hr style="left: 85.8%; animation-duration: 0.351426s; animation-delay: 2.2197s;">
      <hr style="left: 8%; animation-duration: 0.256301s; animation-delay: 2.52282s;">
      <hr style="left: 59.6%; animation-duration: 0.25358s; animation-delay: 2.68117s;">
      <hr style="left: 20.8%; animation-duration: 0.300632s; animation-delay: 3.02308s;">
      <hr style="left: 14%; animation-duration: 0.342179s; animation-delay: 3.74138s;">
      <hr style="left: 9%; animation-duration: 0.201665s; animation-delay: 4.70062s;">
      <hr style="left: 49%; animation-duration: 0.218899s; animation-delay: 2.42876s;">
      <hr style="left: 78%; animation-duration: 0.221913s; animation-delay: 1.85866s;">
      <hr style="left: 2%; animation-duration: 0.3404s; animation-delay: 0.0666315s;">
      <hr style="left: 98%; animation-duration: 0.295662s; animation-delay: 3.94374s;">
      <hr style="left: 43%; animation-duration: 0.284788s; animation-delay: 4.93272s;">
      <hr style="left: 58.9%; animation-duration: 0.235694s; animation-delay: 3.37577s;">
      <hr style="left: 53%; animation-duration: 0.370741s; animation-delay: 3.99325s;">
      <hr style="left: 98%; animation-duration: 0.218248s; animation-delay: 0.571225s;">
      <hr style="left: 78%; animation-duration: 0.430171s; animation-delay: 4.76249s;">
      <hr style="left: 43%; animation-duration: 0.470734s; animation-delay: 2.85633s;">
      <hr style="left: 19%; animation-duration: 0.357296s; animation-delay: 2.08388s;">
      <hr style="left: 89%; animation-duration: 0.384304s; animation-delay: 4.79043s;">
      <hr style="left: 64.7%; animation-duration: 0.216693s; animation-delay: 3.62037s;">
      <hr style="left: 88%; animation-duration: 0.360571s; animation-delay: 0.964592s;">
      <hr style="left: 34%; animation-duration: 0.270449s; animation-delay: 3.47102s;">
      <hr style="left: 31%; animation-duration: 0.454849s; animation-delay: 2.04494s;">
      <hr style="left: 39%; animation-duration: 0.410957s; animation-delay: 3.83693s;">
      <hr style="left: 79%; animation-duration: 0.287923s; animation-delay: 2.86458s;">
      <hr style="left: 48%; animation-duration: 0.401549s; animation-delay: 0.884487s;">
      <hr style="left: 25.87%; animation-duration: 0.279846s; animation-delay: 4.61796s;">
      <hr style="left: 83%; animation-duration: 0.352203s; animation-delay: 4.68998s;">
      <hr style="left: 37%; animation-duration: 0.260585s; animation-delay: 2.592s;">
      <hr style="left: 73%; animation-duration: 0.497863s; animation-delay: 2.4124s;">
      <hr style="left: 96%; animation-duration: 0.204263s; animation-delay: 0.879468s;">
      <hr style="left: 33%; animation-duration: 0.291675s; animation-delay: 2.89896s;">
      <hr style="left: 67%; animation-duration: 0.203078s; animation-delay: 1.73723s;">
      <hr style="left: 53%; animation-duration: 0.437733s; animation-delay: 3.91876s;">
      <hr style="left: 21%; animation-duration: 0.441513s; animation-delay: 0.579519s;">
      <hr style="left: 75.9; animation-duration: 0.308663s; animation-delay: 2.04642s;">
      <hr style="left: 53%; animation-duration: 0.227629s; animation-delay: 2.59507s;">
      <hr style="left: 95%; animation-duration: 0.395259s; animation-delay: 2.37976s;">
      <hr style="left: 35%; animation-duration: 0.295672s; animation-delay: 2.56433s;">
      <hr style="left: 97%; animation-duration: 0.460812s; animation-delay: 4.67658s;">
      <hr style="left: 32%; animation-duration: 0.477826s; animation-delay: 2.10901s;">
      <hr style="left: 4%; animation-duration: 0.422447s; animation-delay: 3.46746s;">
      <hr style="left: 89%; animation-duration: 0.366159s; animation-delay: 1.95266s;">
      <hr style="left: 43%; animation-duration: 0.334915s; animation-delay: 1.83463s;">
      <!-- 这个盒子是闪电效果 -->
      <div class="thunder"></div>
    </div>

    <!-- 标题盒子 -->
    <div class="title">
      <h1 class="rain-h1">A storm is coming</h1>
      <h4 class="rain-h4">The creator of this page ——Tyh.</h4>
    </div>

    <!-- 向下的按钮 -->
    <div class="toBottomBox">
      <img class="toBottom" src="/images/rain/矢量图/向下箭头.svg" alt="">
    </div>
  </div>

  <!-- 下面的盒子 -->
  <div class="bottom-box">
    <div class="explain">
      <span class="span-a">已</span>
      <span class="span-a">经</span>
      <span class="span-a">很</span>
      <span class="span-a">晚</span>
      <span class="span-a">了</span>
      <span class="span-a">…</span>
    </div>

    <div class="explain">
      <span class="span-b">这</span>
      <span class="span-b">是</span>
      <span class="span-b">一</span>
      <span class="span-b">个</span>
      <span class="span-b" style="color:skyblue">暴</span>
      <span class="span-b" style="color:skyblue">风</span>
      <span class="span-b" style="color:skyblue">雨</span>
      <span class="span-b">的</span>
      <span class="span-b">夜</span>
      <span class="span-b">晚</span>
      <span class="span-b">…</span>
    </div>

    <div class="explain">
      <span class="span-c">怎</span>
      <span class="span-c">么</span>
      <span class="span-c">样</span>
      <span class="span-c">，</span>
      <span class="span-c">最</span>
      <span class="span-c">近</span>
      <span class="span-c">过</span>
      <span class="span-c">的</span>
      <span class="span-c">还</span>
      <span class="span-c">好</span>
      <span class="span-c">吗</span>
      <span class="span-c">？</span>
    </div>

    <div class="explain">
      <span class="span-d">今</span>
      <span class="span-d">天</span>
      <span class="span-d">…</span>
      <span class="span-d">…</span>
      <span class="span-d">的</span>
      <span class="span-d">心</span>
      <span class="span-d">情</span>
      <span class="span-d">怎</span>
      <span class="span-d">么</span>
      <span class="span-d">样</span>
      <span class="span-d">？</span>
    </div>

    <div class="explain">
      <span class="span-e">是</span>
      <span class="span-e" style="color: orange;">开</span>
      <span class="span-e" style="color: orange;">心</span>
      <span class="span-e">？</span>
      <span class="span-e" style="color: purple;">难</span>
      <span class="span-e" style="color: purple;">过</span>
      <span class="span-e">？</span>
      <span class="span-e">或</span>
      <span class="span-e">是</span>
      <span class="span-e" style="color: red;">生</span>
      <span class="span-e" style="color: red;">气</span>
      <span class="span-e">？</span>
      <span class="span-e">的</span>
      <span class="span-e">一</span>
      <span class="span-e">天</span>
      <span class="span-e">？</span>
    </div>

    <div class="explain">
      <span class="span-f">有</span>
      <span class="span-f">什</span>
      <span class="span-f">么</span>
      <span class="span-f">想</span>
      <span class="span-f">说</span>
      <span class="span-f">的</span>
      <span class="span-f">或</span>
      <span class="span-f">有</span>
      <span class="span-f">什</span>
      <span class="span-f">么</span>
      <span class="span-f">想</span>
      <span class="span-f">分</span>
      <span class="span-f">享</span>
      <span class="span-f">的</span>
      <span class="span-f">，</span>
      <span class="span-f">都</span>
      <span class="span-f">写</span>
      <span class="span-f">到</span>
      <span class="span-f">这</span>
      <span class="span-f">里</span>
      <span class="span-f">吧</span>
      <span class="span-f">！</span>
    </div>

  </div>

  <p class="tada">今天有什么想说的？</p>
  <br>
  <div class="textarea-box">
    <textarea cols="30" rows="10" maxlength="260"></textarea>
    <br>
    <div class="mood">
      <img src="/images/rain/矢量图/表情.svg" alt="">
      <span>点击这里选择一个今天的心情吧</span>
    </div>
    <button class="publish">发表</button>
  </div>

  <!-- 模态框 -->
  <div class="writeBox">
    <div class="Modal-box">

      <div class="header-box">
        <h4>选择一个今天的心情吧！</h4>
        <p class="mood-text"></p>
      </div>

      <!-- 模态框中的心情图片 -->
      <div class="img-box">
        <div class="tu" onmouseenter="MoveTitle('感谢幸福的日子！')">
          <img src="/images/rain/位图/开心.png" alt="">
          <p style="color: #ffc038;">开心</p>
        </div>
        <div class="tu" onmouseenter="MoveTitle('难得的心情，希望可以长久些！')">
          <img src="/images/rain/位图/非常棒.png" alt="">
          <p style="color:#fe9037;">非常棒</p>
        </div>
        <div class="tu" onmouseenter="MoveTitle('恢复平静了吗？')">
          <img src="/images/rain/位图/生气.png" alt="">
          <p style="color:#ee5a53;">生气</p>
        </div>
        <div class="tu" onmouseenter="MoveTitle('抱抱，辛苦了')">
          <img src="/images/rain/位图/累.png" alt="">
          <p style="color:#466494;">累</p>
        </div>
        <div class="tu" onmouseenter="MoveTitle('心累的时候，难过也是可以的')">
          <img src="/images/rain/位图/忧郁.png" alt="">
          <p style="color: #87b6e2;">忧郁</p>
        </div>
        <div class="tu" onmouseenter="MoveTitle('咝呀~')">
          <img src="/images/rain/位图/心动.png" alt="">
          <p style="color: #ffced8;">心动</p>
        </div>

      </div>

      <div class="foot-box">
        <p class="title-a">你知道吗？下面是人生中最美好的七大瞬间</p>
        <p class="title-b">
          <span style="color: brown;">大病初愈</span>-
          <span style="color: chocolate;">久别重逢</span>-
          <span style="color: cyan;">失而复得</span>-
          <span style="color: darkorchid;">虚惊一场</span>-
          <span style="color: fuchsia;">不期而遇</span>-
          <span style="color: khaki;">不约而至</span>-
          <span style="color: lightgreen;">来日可期</span>
        </p>
        <br>
        <div class="btn">
          <button class="cancel">取消</button>
        </div>
      </div>
    </div>
  </div>

  <div class="blog">
    <div class="blog-box" style="background-image: url('/images/rain/位图/内容背景1.jpg');">
      <h4>这是开心的模拟内容，啦啦啦啦啦啦</h4>
    </div>

    <div class="blog-box" style="background-image: url('/images/rain/位图/内容背景2.jpg');">
      <h4>这是非常棒的模拟内容，啦啦啦啦啦啦</h4>
    </div>

    <div class="blog-box" style="background-image: url('/images/rain/位图/内容背景3.jpg');">
      <h4>这是生气的模拟内容，啦啦啦啦啦啦</h4>
    </div>

    <div class="blog-box" style="background-image: url('/images/rain/位图/内容背景4.jpg');">
      <h4>这是累的模拟内容，啦啦啦啦啦啦</h4>
    </div>

    <div class="blog-box" style="background-image: url('/images/rain/位图/内容背景5.jpg');">
      <h4>这是忧郁的模拟内容，啦啦啦啦啦啦</h4>
    </div>

    <div class="blog-box" style="background-image: url('/images/rain/位图/内容背景6.jpg');">
      <h4>这是心动的模拟内容，啦啦啦啦啦啦</h4>
    </div>

    <div class="blog-box" style="background-image: url('/images/rain/位图/内容背景6.jpg');">
      <h4>这是心动的模拟内容，啦啦啦啦啦啦</h4>
    </div>

    <div class="blog-box" style="background-image: url('/images/rain/位图/内容背景6.jpg');">
      <h4>这是心动的模拟内容，啦啦啦啦啦啦</h4>
    </div>
  </div>

  <div class="loadMore">加 载 更 多 ...</div>

  <!-- 页脚 -->
  <div class="foot">
    <p>不是每一场相遇都有结局，但每一场相遇都有意义，有些人只适合你成长，有些故事，只适合收藏。</p>
  </div>

  <script src="/js/myJS/My_JS.js"></script>

  <script>
    // 改变两个导航栏样式
    $(".TopNavigation-bar").style = "background: transparent;box-shadow: 0 0 0 0;";

    // 点击按钮向下滚动效果       
    $(".toBottomBox").onclick = function () {
      window.scrollTo({
        top: 360,
        behavior: "smooth"
      })
    }


    // 选择心情模态框展示
    $(".mood").onclick = function () {
      $(".writeBox").style =
        `
          opacity: 1;
          top: 0px;
          left: 0px;
          right: 0px;
          bottom: 0px;
          transition: opacity 0.95s;
          width: 100%;
          height: 100%;
          position: fixed;
      `
    }


    // 关闭模态框
    $(".cancel").onclick = function () {
      $(".writeBox").style =
        `
          opacity: 0;
          position: absolute;
        `
    }


    // 模态框中鼠标移入后展示不同的文本内容
    function MoveTitle(Title) {
      $(".mood-text").innerHTML = Title;
    }


    // 文字渐出效果
    function displayWords(Class) {
      for (let i = 0; i < $Al(Class).length; i++) {
        setTimeout(() => {
          $Al(Class)[i].style.display = "block";
        }, 150 * i)
      }
    }
    // 延时1.5秒后文字渐出
    setTimeout(() => {

      displayWords(".span-a");

      setTimeout(() => {
        displayWords(".span-b");
      }, 1050)

      setTimeout(() => {
        displayWords(".span-c");
      }, 3000)

      setTimeout(() => {
        displayWords(".span-d");
      }, 4800)

      setTimeout(() => {
        displayWords(".span-e");
      }, 7200)

      setTimeout(() => {
        displayWords(".span-f");
      }, 10100)

    }, 1500);


    // 选择心情效果 选择相应的心情图标 文本框背景改变成对应的心情背景
    let moodImg = $Al(".tu");
    for (let i = 0; i < moodImg.length; i++) {
      moodImg[i].onclick = function () {
        $("textarea").style.background = `url('/images/rain/位图/内容背景${i + 1}.jpg')`;
        // 选择完心情后关闭模态框
        $(".writeBox").style =
          `
            opacity: 0;
            position: absolute;
          `;
        // 如果有背景 文字颜色是黑色 否则是白色
        if ($("textarea").style.background) {
          $("textarea").style.color = "black";
        } else {
          $("textarea").style.color = "#edede5";
        }
      }
    }


    // 点击发表按钮
    $(".publish").onclick = function () {
      if ($("textarea").style.background === "" || $("textarea").value === "") {
        alert("没有选择心情或内容为空不能发表！")
      } else {
        alert("可以发表")
      }
    }

  </script>
</body>

{% endblock %}